/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.wallpaper {
    position: fixed; width: 100%; height: 100%; z-index: -1;
    img {
        width: 100%; height: 100%;
    }
}

$borderColor: #00A7FF;

.cont {
    max-width: 1200px; margin: auto; z-index: 3;
    .logo {
        text-align: center; padding: 30px 0;
    }
}

.addNav {
    background-color: rgba($color: $borderColor, $alpha: 0.3); border: 1px $borderColor solid; border-radius: 10px; display: flex; padding: 15px 30px; box-sizing: border-box; line-height: 24px;
    h3 {
        font-weight: bold; color: #FFFFFF; font-size: 24px;
    }
    div {
        margin-left: 20px; display: flex;
        a {
            color: #FFFFFF; font-size: 20px; text-decoration: none; font-weight: lighter; margin-right: 10px;
            &:hover {
                color: yellow; font-weight: normal;
            }
        }
    }
}

.box {
    position: relative; border: #00A7FF 1px solid; border-radius: 20px; background: rgba($color: #0073BA, $alpha: 0.45); margin-top: 30px;
    a {
        text-decoration: none;
    }
    b {
        width: 30px; height: 30px; display: block; position: absolute;background-image: url('../img/jiao.png');
        &:nth-child(1) {
            top: -3px; left: -3px;
        }
        &:nth-child(2) {
            transform: rotate(90deg); right: -3px; top: -3px;
        }
        &:nth-child(3) {
            transform: rotate(180deg); right: -3px; bottom: -3px;
        }
        &:nth-child(4) {
            transform: rotate(270deg); left: -3px; bottom: -3px;
        }
    }
    .tbody {
        background: rgba($color: #000000, $alpha: 0.2); margin: 20px;
    }
    &.box1 {
        width: 691px; height: 317px; color: #FFFFFF; float: left;
        .tbody {
            width: 650px; height: 277px; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
            a {
                color: #FFFFFF; text-align: center; align-self: center;
                .iconfont {
                    font-size: 50px;
                }
                i {
                    display: block; margin-top: 10px; font-size: 24px;
                }
            }
        }
    }
    &.box2 {
        width: 488px; height: 317px; float: right;
        .tbody {
            width: 448px; height: 277px; display: grid;grid-template-rows: repeat(2, 1fr);
            a {
                color: #FFFFFF; text-align: center; align-self: center;
                .iconfont {
                    font-size: 50px;
                }
                i {
                    display: block; margin-top: 10px; font-size: 24px;
                }
            }
        }
    }
    &.box3 {
        width: 100%; height: 157px;
        .tbody {
            width: calc(100% - 40px); height: 117px; display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr);
            .icon {
                color: #FFFFFF; text-align: center; align-self: center;
                .iconfont {
                    font-size: 50px;
                }
                i {
                    display: block; margin-top: 10px; font-size: 20px;
                }
            }
        }
    }
}

.clear {
    clear: both;
}

.homeTitle {
    font-size: 24px; color: #FFFFFF; line-height: 100px; padding: 0 30px; box-sizing: border-box; font-weight: bold;
}

.myTable {
    width: 100%;
    tr {
        td, th {
            line-height: 50px; color: #FFFFFF; text-align: left; padding: 0 10px;
        }
        th {
            background: rgba($color: #05337C, $alpha: 0.8);
        }
        &:nth-child(even) {
            td {
                background: rgba($color: #002664, $alpha: 0.8);
            }
        }
    }
}

.tbody_yqlj {
    background: rgba($color: #002664, $alpha: 0.8); padding: 20px 30px;
    ul {
        display: flex; flex-wrap: wrap;
        li {
            min-width: 180px; margin-right: 10px; line-height: 24px;
            a {
                color: #FFFFFF; font-size: 14px; text-decoration: none;
                &:hover {
                    color: yellow;
                }
            }
        }
    }
}
.footer {
    background: rgba($color: #000000, $alpha: 0.6); padding: 20px 0; text-align: center; color: #FFFFFF; margin-top: 30px; font-size: 14px;
}

.report {
    background: #FFFFFF; width: 70px; height: 70px; border-radius: 70px; text-align: center; position: fixed; right: 20px; bottom: 20px; cursor: pointer;
    a {
        display: flex; align-items: center; flex-wrap: wrap; text-decoration: none;height: 60px; 
        span {
            color: red; font-size: 32px; width: 70px; padding-top: 5px;
        }
        b {
            text-align: center; flex: 1; font-size: 14px; color: rgba($color: #002664, $alpha: 0.8);
        }
    }
    
}

.header {
    height: 200px; width: 100%; background: url('../img/top.jpg') top center; display: flex; align-items: center; justify-content: space-between;
    .logo {
        flex: 1;
        text-align: center;
    }
}

.content {
    width: 1200px; margin: auto;
    &.mobile {
        width: 100%;
        .add {
            padding: 0 10px; line-height: 40px; font-size: 14px;
            span {
                font-size: 18px;
            }
            a {
                text-decoration: none;
            }
        }
        .tbody {
            margin-top: 0;
            &.art {
                table {
                    width: 98%; margin: 10px auto; font-size: 14px;
                    tr {
                        th {
                            width: 100px; padding: 0 10px;
                        }
                    }
                }
            }
        }
    }
    .add {
        box-shadow: 0 10px 20px rgba($color: #000000, $alpha: 0.1); line-height: 60px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 0 50px; box-sizing: border-box; font-size: 16px;
        span {
            font-size: 24px;
        }
    }
    .tbody {
        display: flex; margin-top: 30px;
        &.art {
            box-shadow: 0 10px 20px rgba($color: #000000, $alpha: 0.01);
            table {
                width: 90%; margin: 30px auto; border-bottom: 1px rgba($color: #000000, $alpha: 0.06) solid;
                border-right: 1px rgba($color: #000000, $alpha: 0.06) solid;
                tr {
                    td, th {
                        height: 40px; line-height: 40px;
                        background: rgba($color: #000000, $alpha: 0.06);
                        border-top: 1px rgba($color: #000000, $alpha: 0.06) solid;
                        border-left: 1px rgba($color: #000000, $alpha: 0.06) solid;
                    }
                    td {
                        background: #FFFFFF; padding-left: 10px;
                    }
                }
            }
        }
        .left {
            width: 300px; margin-right: 20px; box-shadow: 0 10px 20px rgba($color: #000000, $alpha: 0.1); padding: 0px 10px; box-sizing: border-box;
            ul {
                border-bottom: 1px rgba($color: #000000, $alpha: 0.1) solid;
                margin-top: 20px; padding-bottom: 20px;
                &:last-child {
                    border-bottom: none;
                }
                li {
                    line-height: 40px; padding: 0 20px; border-radius: 40px;
                    a {
                        text-decoration: none; color: #273149; 
                        &::after {
                            font-family: "iconfont"; content: "\e604"; float: right; color: rgba($color: #000000, $alpha: 0.2);
                        }
                    }
                    &.active {
                        background: #EAF4FF;
                        a {
                            font-weight: bold;
                        }
                    }
                }
            }
        }
        .right {
            flex: 1;
        }
    }
}

.searchInput {
    width: 200px; height: 40px; border-radius: 5px; border: 1px rgba($color: #000000, $alpha: 0.3) solid; outline: none; padding: 0 10px; font-size: 16px;
}

.searchBox {
    button {
        height: 40px; background: $borderColor; color: #FFFFFF; border-radius: 40px; border: none; padding: 0 20px; outline: none; cursor: pointer;
    }
}

.myTableLight {
    width: 100%; margin-top: 30px;
    table {
        width: 100%;
        tr {
            td, th {
                height: 40px; line-height: 40px;
            }
            &:nth-child(odd), th {
                background: rgba($color: #000000, $alpha: 0.06);
            }
        }
    }
}